<template>
  <d2-container>
    <template slot="header">upload demo</template>
    <el-upload
      class="avatar-uploader"
      :action="uploadAction"
      :show-file-list="false"
      :on-progress="handleProgress"
      :on-change="handleChange"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :multiple="true"
    >
    <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <div class="file-list" v-for="(item, index) in fileList" :key="index">
      <div class="file-left">
        <img v-if="pdfTypeList.indexOf(getFileType(item.name)) > -1" class="file-icon" src="@/assets/hk-icon/uploadfile/pdf.png"/>
        <img v-else-if="wordTypeList.indexOf(getFileType(item.name)) > -1" class="file-icon" src="@/assets/hk-icon/uploadfile/word.png"/>
        <img v-else-if="excleTypeList.indexOf(getFileType(item.name)) > -1" class="file-icon" src="@/assets/hk-icon/uploadfile/excle.png"/>
        <img v-else-if="pptTypeList.indexOf(getFileType(item.name)) > -1" class="file-icon" src="@/assets/hk-icon/uploadfile/ppt.png"/>
        <img v-else-if="imageTypeList.indexOf(getFileType(item.name)) > -1" class="file-icon" src="@/assets/hk-icon/uploadfile/image.png"/>
        <img v-else-if="ysbTypeList.indexOf(getFileType(item.name)) > -1" class="file-icon" src="@/assets/hk-icon/uploadfile/ysb.png"/>

        <div class="file-name" @click="fileClick(item)">{{item.name}}</div>
      </div>
      <el-progress v-if="item.progressFlag" class="fiel-progress"  :stroke-width="10" :percentage="item.progressPercent"></el-progress>
      <el-progress v-else class="fiel-progress" color="rgb(92, 184, 122)"  :stroke-width="10" :percentage="100"></el-progress>
      <div class="file-menu-icon">
        <i class="file-success el-icon-circle-check"></i>
        <i class="file-delete el-icon-delete" @click="deleteFile(index)"></i>
        <i class="file-download el-icon-download" @click="downloadFile(item)"></i>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!-- <img src="http://localhost:3000/uploads/cfc8071b22816df8eca4dbf593822d28" alt=""> -->
    <!-- <iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://localhost:3000/uploads/123.pptx' width='100%' height='100%' frameborder='1'></iframe> -->
  </d2-container>
</template>

<script>
export default {
  name: 'page3',
  data () {
    return {
      uploadAction: 'http://localhost:3000/upload1',
      fileList: [], // 文件列表
      imageTypeList: ['jpg', 'png', 'jpeg', 'gif', 'webp'], // 图片类型
      wordTypeList: ['doc', 'docx'], // word类型
      pptTypeList: ['ppt', 'pptx'], // ppt类型
      excleTypeList: ['xls', 'xlsx'], // excle类型
      pdfTypeList: ['pdf'], // pdf类型
      ysbTypeList: ['rar', 'zip', '7z'], // 压缩包类型
      dialogVisible: false, // 图片预览弹窗
      dialogImageUrl: '' // 图片预览路径
    }
  },
  methods: {
    // 获取文件后缀名
    getFileType (name) {
      return name.substring(name.lastIndexOf('.') + 1, name.length)
    },

    // 点击文件名查看
    fileClick (file) {
      console.log(file)
      const a = document.createElement('a')
      const tempFileType = this.getFileType(file.name)

      if (this.imageTypeList.indexOf(tempFileType) > -1) { // image
        this.dialogImageUrl = file.response.url
        this.dialogVisible = true
      } else if (this.pdfTypeList.indexOf(tempFileType) > -1) { // pdf
        a.setAttribute('href', file.response.url)
        // a.setAttribute('href', 'http://localhost:3000/uploads/123.pdf')
        a.setAttribute('target', '_blank')
        document.body.appendChild(a)
        a.click()
      } else if (this.wordTypeList.indexOf(tempFileType) > -1) { // word
        console.log('word')
        const word = 'http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=' + file.response.url
        a.setAttribute('href', word)
        // a.setAttribute('href', 'http://localhost:3000/uploads/123.pdf')
        a.setAttribute('target', '_blank')
        document.body.appendChild(a)
        a.click()
      } else if (this.excleTypeList.indexOf(tempFileType) > -1) { // excle
        console.log('excle')
      } else if (this.pptTypeList.indexOf(tempFileType) > -1) { // ppt
        console.log('ppt')
        const ppt = 'https://view.officeapps.live.com/op/view.aspx?src=' + file.response.url
        a.setAttribute('href', ppt)
        // a.setAttribute('href', 'http://localhost:3000/uploads/123.pdf')
        a.setAttribute('target', '_blank')
        document.body.appendChild(a)
        a.click()
      } else if (this.ysbTypeList.indexOf(tempFileType) > -1) { // ysb
        console.log('ysb')
      }
    },

    // 上传前-钩子
    beforeUpload (file) {
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      console.log(file)
      // return isJPG && isLt2M;
    },

    // 上传中-钩子
    handleProgress (event, file, fileList) {
      console.log(fileList)
      fileList.forEach(item => {
        console.log(item)
        if (item.percentage === 100) {
        } else {
          item.progressFlag = true
          item.progressPercent = Math.abs(item.percentage.toFixed(0))
        }
      })
      this.fileList = fileList
    },

    // 上传成功-钩子
    handleSuccess (res, file, fileList) {
      fileList.forEach((item, index) => {
        console.log(item)
        if (item.status === 'success') {
          item.progressFlag = false
        }
      })
      this.fileList = fileList
    },

    // 文件列表改变-钩子
    handleChange (file, fileList) {
      this.fileList = fileList
    },

    // 删除文件
    deleteFile (index) {
      this.fileList.splice(index, 1)
    },

    // 下载文件
    downloadFile (item) {
      console.log('下载文件', item)
    }
  }
}
</script>

<style lang="scss">
.file-list {
  display: flex;
  justify-content: space-between;
  width: 600px;
  padding: 10px;
  line-height: 20px;
  align-items: center;
  cursor: pointer;
  transition: all .5s cubic-bezier(.55,0,.1,1);
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
  transition-delay: 0s;
  border-bottom: 1px solid #eee;

  .file-left {
    display: flex;
    align-items: center;

    .file-icon {
      width: 15px;
      height: 15px;
    }

    .file-name {
      color: #606266;
      padding-left: 4px;
      width: 200px;
    }
  }

  .fiel-progress {
    width: 200px;
  }

  .file-menu-icon {
    display: flex;
    width: 100px;

    .file-success {
      margin-left: 60px;
      color: #67c23a;
    }

    .file-delete {
      display: none;
    }

    .file-download {
      display: none;
    }
  }
}

.file-list:hover {
  background: #eee;

  .file-name {
    color: #409eff;
  }

  .file-menu-icon {
    display: flex;
    justify-content: flex-end;

    .file-success {
      display: none;
    }

    .file-delete {
      display: block;
      margin: 0 10px;
      color: #F56C6C;
    }

    .file-download {
      display: block;
      color: #409EFF;
    }
  }
}

</style>
